<!DOCTYPE html>
<html class="x-admin-sm">
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
  </head>
  
  <body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form action="" method="post" class="layui-form layui-form-pane" id="form1">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>角色名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="name1" name="name" readonly="readonly" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                        拥有权限
                    </label>
                    <table  class="layui-table layui-input-block" id="tb" border="1">
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="layui-form-item">
                <button class="layui-btn"  id="btn" type="button" lay-filter="add">增加</button>
              </div>
            </form>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
		<script src="./js/vue.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/jquery.cookie.js"></script>
    <script>
    	var roleId = $.cookie("id");
			var name = $.cookie("name");
			$("#name1").val(name);
			$(function() {
				         $.ajax({
				         	type:"get",
				         	url:"http://localhost:9095/admin/permission/selectId",
				         	async:false,
				         	data :{
				         		
				         	},
				         	headers: {
									"token2": $.cookie("token2")
								},
				         	success(msg){
				         		   console.log(msg.data);
				         		   var tb=$("#tb");
				         		   $.each(msg.data,function(index,obj){
				         		   	  var tr = $("<tr></tr>");
				         		   	  if(obj.parentId==0){
				         		   	  	var td1 = $("<td><input id="+obj.functionId+" name='functionId' lay-filter='father' lay-skin='primary' type='checkbox' value="+obj.functionId+" title="+obj.functionName+"></td>");
				         		   	 		var td2 = $("<td></td>");
				         		   	  $.each(msg.data,function(index,obj2){
				         		   	  	if(obj2.parentId==obj.functionId){
				         		   	  		var lay = $("<input id="+obj2.functionId+" name='functionId' lay-filter='father' lay-skin='primary' type='checkbox' value="+obj2.functionId+" title="+obj2.functionName+">");
				         		   	  	}
				         		   	  td2.append(lay);
				         		   	  tr.append(td1);
				         		   	  tr.append(td2);
//				         		   	  
				         		   	  })
				         		   	  tb.append(tr);
				         		   	   }
				         		   });
				         		   
				         	 $.ajax({
				         	type:"get",
				         	url:"http://localhost:9095/admin/permission/selectgetById",
				         	async:false,
				         	headers: {
									"token2": $.cookie("token2")
								},
				         	data :{
				         		"roleId" :roleId
				         	},
				         	success(msg2){
				         		  console.log(msg2.data);
				         		  $.each(msg.data, function(index,obj) {
				         		  	 $.each(msg2.data, function(index,obj2) {
				         		  	 	   if(obj.functionId==obj2.functionId){
				         		  	 	   	 $("#"+obj.functionId).prop("checked", true);
				         		  	 	   }
				         		  	 })
				         		  });
				         		   
				         	}
				         });
				         		   
				         	}
				         	
				         });
				$("#btn").click(function() {
					var fun = "";
					hobbies = document.getElementsByName("functionId");
					for(let index = 0; index < hobbies.length; index++) {
						if(hobbies[index].checked) {
							fun+= hobbies[index].value + ',';
						}
					}
					      $.ajax({
					      	type:"post",
					      	url:"http://localhost:9095/admin/permission/insertRoleFunction",
					      	async:true,
					      	headers: {
									"token2": $.cookie("token2")
								},
					      	data:{
					      		"roleId": roleId,
									"functionId": fun
					      	},
					      	
					      	success(msg){
					      		if(msg.code == 201) {
										alert("新增权限失败");
									} else {
										alert("新增权限成功");
										location.href = "sysuser-role.html";
										
									}
					      	}
					      });
				});
			});
    	
    	
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });


        form.on('checkbox(father)', function(data){

            if(data.elem.checked){
                $(data.elem).parent().siblings('td').find('input').prop("checked", true);
                form.render(); 
            }else{
               $(data.elem).parent().siblings('td').find('input').prop("checked", false);
                form.render();  
            }
        });
          
          
        });
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>